<!DOCTYPE html>
<html lang="zh-CN">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <!-- 上述3个meta标签*必须*放在最前面，任何其他内容都*必须*跟随其后！ -->
	<link rel="icon" href="img/favicon.ico">
    <title>歌单广场</title>

    <!-- Bootstrap -->
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/css/bootstrap.min.css" rel="stylesheet">
	<link href="css/main.css" rel="stylesheet"/>
	<style>
		body {
		    background-color: #fafafa;
		}
		a:focus {
			color: #FFFFFF;
		}
	</style>
	
	<meta name="keywords" content="音乐，牟云音乐，网易云音乐，音乐馆，歌单，排行榜，歌手，免费下载，在线音乐，免费音乐,音乐，播放器，网易，下载，播放，DJ，免费，明星，精选，歌单，识别音乐，收藏，分享音乐，音乐互动，高音质，320K，音乐社交，官网，music.superboyjack.cn">
	<meta name="description" content="牟云音乐是一个音乐爱好者推出的一款网络音乐服务产品，海量音乐在线试听、新歌热歌在线首发、歌词翻译、手机铃声下载、高品质无损音乐试听、海量无损曲库、正版音乐下载、、MV观看等，是互联网音乐播放和下载的优选。">
	<!-- 百度统计 -->
	<script>
	var _hmt = _hmt || [];
	(function() {
	  var hm = document.createElement("script");
	  hm.src = "https://hm.baidu.com/hm.js?58f4b4a2c99429764a9757416df9e31f";
	  var s = document.getElementsByTagName("script")[0]; 
	  s.parentNode.insertBefore(hm, s);
	})();
	</script>
  </head>
  <body>
	
	<!-- 引入导航栏 -->
	<div class="mod_header">
	    <div class="section_inner">
	        <h1 class="qqmusic_title"><a href="index.html"><img src="img/musiclogo.png" alt="牟云音乐" class="music_logo"></a></h1>
	        <!-- 导航 S -->
	        <ul class="mod_top_nav" role="nav">
	            <li class="top_nav__item">
	                <a href="index.html" class="top_nav__link" title="音乐馆">音乐馆</a>
	            </li>
	            <li class="top_nav__item">
	                <a href="playlists.html" class="top_nav__link top_nav__link--current" title="歌单">歌单</a>
	            </li>
				<li class="top_nav__item">
				    <a href="index.html#ranking" class="top_nav__link" title="排行榜">排行榜</a>
				</li>
				<li class="top_nav__item">
				    <a href="singers.html" class="top_nav__link" title="歌手">歌手</a>
				</li>
	        </ul>
		</div>
	</div>
	
	<!-- 加载动画 -->
	<div class='miaov_head' id="loading">
	   <iframe MARGINWIDTH=0 MARGINHEIGHT=0 HSPACE=0 VSPACE=0 FRAMEBORDER=0 SCROLLING=no src="loading.html" width="100%"  height="520px">
	  </iframe>
	</div>
		
	<div class="main hidden" id="playlists">
			<!-- 标签筛选 -->
		<div class="mod_playlist_tag" id="taglist">
			<div class="js_normal">
				
				<div class="playlist_tag__list" v-for="(cat,key) in categories">
					<h3 class="playlist_tag__tit c_tx_thin" v-cloak>{{ cat }}</h3>
									
					<i class="playlist_tag__line"></i>
									
					<ul class="playlist_tag__tags">
						<li class="playlist_tag__itembox" v-for="tag in tags_array[key]">
							<a href="javascript:;" class="playlist_tag__item js_tag" :data-id=" tag " v-cloak>{{ tag }}</a>
						</li>
					</ul>
				</div>
			</div>
			
			<div class="mod_part_detail">
				<div class="part_detail__hd">
					<h2 class="part_detail__tit">全部歌单</h2>
					<div class="part_switch" id="sortbox" aria-label="排列方式"><a href="javascript:;" class="part_switch__item js_sort part_switch__item--left part_switch__item--select" title="最热" data-id="hot" data-sort="5">最热</a><a href="javascript:;" class="part_switch__item part_switch__item--right js_sort" title="最新" data-id="new" data-sort="2">最新</a></div>
				</div>
				<div class="mod_playlist mod_playlist--all">
					<ul class="playlist__list" id="playlist_box">
						<li v-for="playlist in playlists" class="playlist__item playlist__item--hover" onmouseover="this.className=(this.className+' playlist__item--hover')" onmouseout="this.className=this.className.replace(/ playlist__item--hover/, '')">
							<div class="playlist__item_box">
								<div class="playlist__cover mod_cover" style="visibility: visible;">
									<a :href="toPlaylistPage(playlist.id)" class="js_playlist" :title="playlist.name">
										<img :src="playlist.coverImgUrl.replace('http','https')" :alt="playlist.name" class="playlist__pic" style="display: block; visibility: visible;">
										<i class="mod_cover__icon_play js_play"></i>
									</a>
								</div>
								<h4 class="playlist__title">
									<span class="playlist__title_txt">
										<a :href="toPlaylistPage(playlist.id)" class="js_playlist" :title="playlist.name">
											{{ playlist.name }}
										</a>
									</span>
								</h4>
								<div class="playlist__author">
									<a href="" class="js_user" title="">{{ playlist.creator.nickname }}</a>
								</div>
								<div class="playlist__other">
									播放量： {{ formatPlayCount(playlist.playCount) }}
								</div>
								<!-- <a href="javascript:;" class="btn_operate_menu js_playlist_more" data-type="3" data-id="7298995954" data-stat="y_new.playlist.pic_mod_more"><span class="icon_txt">更多</span></a> -->
							</div>
						</li>	
				</ul>
				</div>
			</div>
		</div>
	</div>
	
	<footer class="footer">
	    <div class="container">	
			<div style="text-decoration:none; text-align:center; padding:20px 0;">
				<div style="width:600px;margin:0 auto; padding:20px 0;">
					<p style="margin:10px 0px;">
					<b>Copyright © 2019
					<a href="https://superBoyJack.cn" target="_blank" title="superBoyJack"> superBoyJack</a> 版权所有 Powered By 
					<a href="http://wpa.qq.com/msgrd?uin=2656288235" target="_blank" title="superBoyJack">superBoyJack</a> Design.&nbsp;&nbsp;
					</b>
					<!-- 备案信息代码 -->
					</p>
					<a target="_blank" href="http://www.beian.gov.cn/portal/registerSystemInfo?recordcode=41152502000110" style="display:inline-block;text-decoration:none;height:20px;line-height:20px;">
						<img src="https://superboyjack.cn/upload/2019/11/%E5%A4%87%E6%A1%88%E5%9B%BE%E6%A0%87-b8473f72b5dc4bf1885d394815c38a9a.png" style="float:left;"/>
						<p style="float:left;height:20px;line-height:20px;margin: 0px 0px 0px 5px; color:#939393;">
						豫公网安备 41152502000110号 豫ICP备19039675号
						</p>
					</a>
				</div>
			</div>
		</div>
	</footer>
		
    <!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
    <script src="https://cdn.jsdelivr.net/npm/jquery@1.12.4/dist/jquery.min.js"></script>
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@3.3.7/dist/js/bootstrap.min.js"></script>
	<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
	<script src="js/jquery.base64.js"></script>
  </body>
	<script>
		
		var tag = '华语';
		var order = 'hot';
		setTimeout(function () {
			$(document).ready(function() {
			$(".playlist_tag__tags li a").click(function() {
				$(this).addClass("playlist_tag__item--select").parent().siblings().children().removeClass("playlist_tag__item--select");
				$(this).parent().parent().parent().siblings().children().children().children().removeClass("playlist_tag__item--select");
				tag = this.dataset.id;
				get_playlist();
				console.log(tag + order);
			});
			$(".part_switch a").click(function(){
				$(this).addClass("part_switch__item--select").siblings().removeClass("part_switch__item--select");
				order = this.dataset.id;
				get_playlist();
				console.log(tag + order);
			});
			
			
		});
		}, 200);
		
		
		
		$.getJSON(
		    "https://api.music.superboyjack.cn/playlist/catlist",
		    function(data) {
				if(data.code == 200){
					playlistsVue.categories = data.categories;
					playlistsVue.tags = data.sub;
					for(var tag of playlistsVue.tags){
						if(playlistsVue.tags_array[tag.category].length <9){
							playlistsVue.tags_array[tag.category].push(tag.name);
						}
					}
					document.getElementById("loading").setAttribute("class","miaov_head hidden");
					$("div#playlists").removeClass("hidden");
				}
		    }
		);
		
		$.getJSON(
		    "https://api.music.superboyjack.cn/top/playlist",
		    function(data) {
				if(data.code == 200){
					playlistsVue.playlists = data.playlists;
				}
		    }
		);
		
		function get_playlist(){
			var tag_var = "cat=" + tag;
			var order_var = "order=" + order;
			$.getJSON(
			    "https://api.music.superboyjack.cn/top/playlist?" + tag_var + "&" + order_var,
			    function(data) {
					if(data.code == 200){
						playlistsVue.playlists = data.playlists;
					}
			    }
			);
		}
		
		var playlistsVue = new Vue({
			el: '#playlists',
			data: {
				categories: '',
				tags: [],
				tags_array:[[],[],[],[],[]],
				tag_num: 0,
				playlists: [],
			},
			methods: {
				// 传送至相应的歌手详情页面
				toPlaylistPage: function (id) {
					return 'playlist.html?' + $.base64.encode('id=' + id);
				},
				formatPlayCount: function (count){
					if(count >= 100000)
						return (count/10000).toFixed(2) + "万";
					else
						return count;
				},
			},
		});
	</script>
</html>